{% extends "base_site.html" %}
{% load i18n %}
{% load properties %}

{% block extrastyle %}<link rel="stylesheet" type="text/css" href="{% settings_property 'CURRENT_THEME' %}form.css" />{% endblock %}
{% block extrahead %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.8.2.min.js"></script>
{% endblock %}

{% block bodyclass %}home{% endblock %}

{% block content %}
<h1>Some header goes here+++</h1>
<p>Use this form below to apply for your CAIPS request; all fields are required.</p>
<div class="form_container">
    <form method="post" action="" class="caips_request">
        {% csrf_token %}
        {{ dependents_formset.management_form }}
        
        {% if sr_form.non_field_errors %}
        <p><span class="error">
        {{ sr_form.non_field_errors|join:", " }}
        </span></p>
        {% endif %}
        
        {% if principal_form.non_field_errors %}
        <p><span class="error">
        {{ principal_form.non_field_errors|join:", " }}
        </span></p>
        {% endif %}
        
        {{ sr_form.as_p }}
        
        <fieldset>
        	<legend><p><strong>Principal applicant</strong></p></legend>
	        {{ principal_form.as_p }}
        </fieldset>
        
        <div id="dependents_container">
        {% for form in dependents_formset %}
        <fieldset>
            <legend>{% if form.is_principal %}<p><strong>Principal</strong></p>{% else %}Dependent{% endif %}</legend>
            {{ form.as_p }}
        </fieldset>
        {% endfor %}
        </div>

        <p>
        	<a href="javascript:void(0)" id="add_form" onclick="add_form()">Add Dependent</a>
        	<script lang="javascript">
	        	var form_count = {{dependents_formset.total_form_count}};
	        	$('#add_form').click(function() {
	        		var form = '{{dependents_formset.empty_form.as_p|escapejs}}'.replace(/__prefix__/g, form_count);
	        	    form_count++;
	        	    $('#dependents_container').append('<legend><p><strong>Dependent #' + form_count + '</strong></p></legend>');
	        	    $('#dependents_container').append(form);
	        	    $('#id_dependents-TOTAL_FORMS').val(form_count);
	        	});
			</script>
        </p>
        <p><button type="submit" name="submit" id="submit">Send</button></p>
    </form>
</div>
{% endblock %}
